<!-- http://localhost:8080/JavascriptAPI/localapi/v3.0.0/test/polylineEditor-v1/pages/polyline.html -->

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>autonavi的Hello, World</title>

<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="../js/ajax-browser-min.js"></script>
<script type="text/javascript" src="../js/polyeditor1.js"></script>
<script type="text/javascript">
var mapObj,canvas,ctx,canvas2,ctx2,editor,index=true;

	function mapInit() {
		var opt = {
			zoom:13,//设置地图zoom级别
			center:new MMap.LngLat(116.397428,39.90923),//设置地图中心点	
			doubleClickZoom:true,//双击放大地图
			scrollwheel:true//鼠标滚轮缩放地图
	  	}
		 mapObj = new MMap.Map("map",opt);
		canvas=document.getElementById("can");
		canvas2=document.getElementById("can2");
		ctx=canvas.getContext("2d");
		ctx2=canvas2.getContext("2d");
		
	}
	function clip(){
		
		var div=document.getElementById("_lay_"+mapObj._unique+"_base");
		for(var childern=div.childNodes,length=childern.length,i=0;i<length;i++){
			ctx.drawImage(childern[i],256*(i%3)+0,256*(i/3),256*(i%3)+0,256*(i/3));
			ctx2.drawImage(canvas,256*(i%3)+0,256*(i/3),256*(i%3)+0,256*(i/3));
		}
		//方案不行了..因为canvas安全问题。不允许drawImage
		var loc=canvas2.toDataURL("image/png").replace("image/png","image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
		window.location.href=loc;
	}
	function editLine() {
			var arr = new Array(); //经纬度坐标数组  
			arr.push(new MMap.LngLat("116.368904", "39.913423"));
			arr.push(new MMap.LngLat("116.382122", "39.901176"));
			arr.push(new MMap.LngLat("116.387271", "39.912501"));
			
			polyline = new MMap.Polyline({
				path: arr,
				strokeColor: "#F00",
				strokeOpacity: 0.4,
				strokeWeight: 3,
				strokeStyle: "dashed",
				strokeDasharray: [10, 5],
				visiable:true
			});
			mapObj.addOverlays(polyline);
				editor=new MMap.PolylineEditor(polyline);
				editor.edit();
			
	}
	function cancle(){
		editor.cancle();
		
	}
	function c(){
		editor.close();
	}
	function o(){
		editor.edit();
	}
	var editor2;
	function m(){
			editor2=new MMap.PolylineEditor(polyline);
			editor2.edit();
	}
</script>
</head>
<body onload="mapInit();">
<canvas style="display:none" width="1000px" height="1000px" id="can"></canvas>
<canvas style="display:none" width="1000px" height="1000px" id="can2"></canvas>
<input type="button" value="clit" onclick="clip();">
<input type="button" value="editor" onclick="editLine();">
<input type="button" value="close" onclick="c();">
<input type="button" value="open" onclick="o();">
<input type="button" value="more" onclick="m();">
<input type="button" value="cancle" onclick="cancle();">
<div style="position:absolute;left:100px;top:100px;width:600px;height:600px"id="map"></div>

</body >
</html>

